import 'package:flutter/material.dart';

main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ),
  );
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  @override
  void initState() {
    super.initState();
    _animationController = new AnimationController(
        duration: Duration(milliseconds: 1000), vsync: this);
    _animationController.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("三分钟搞定两列竖向布局"),
      ),
      body: Container(
        child: buildBody(),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            if (_animationController.isCompleted) {
              _animationController.reverse();
            } else {
              _animationController.reset();
              _animationController.forward();
            }
          },
          child: Text("开始")),
    );
  }

  buildBody() {
    return Row(
      children: [
        Expanded(
          child: ClipRRect(
              borderRadius: BorderRadius.all(
                Radius.circular(4),
              ),
              child: buildProgress()),
        ),
        SizedBox(width: 10),
        Text("100%"),
      ],
    );
  }

  buildProgress() {
    return Stack(
      children: [
        Center(
          child: Container(
            height: 16,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              color: Colors.grey,
            ),
          ),
        ),
        ClipRect(
          child: Align(
            widthFactor: _animationController.value,
            child: Container(
              height: 16,
              decoration: BoxDecoration(
                gradient: LinearGradient(colors: [
                  Colors.blue[600],
                  Colors.blueAccent,
                ]),
              ),
            ),
          ),
        ),
      ],
    );
  }
}
